<template>
  <label class="b-radio">
    <span class="b-radio-input" :class="{'is-checked': isChecked}">
      <span class="b-radio-inner"></span>
      <input 
        type="radio" 
        class="b-radio-native" 
        :disabled="disabled" 
        :value="label" 
        v-model="radioModel"
      >
    </span>
    <span class="b-radio-label">
      <slot></slot>
      <template v-if="!$slots.default">{{label}}</template>
    </span>
  </label>
</template>

<script>
export default {
  name: 'BRadio',
  inject: {
    RadioGroupList: {
      default: ''
    }
  },
  props: {
    label: {
      type: [String, Number],
    },
    value: {
      type: [String, Number]
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isGroup () {
      return !!this.RadioGroupList
    },
    isChecked () {
      return this.radioModel === this.label
    },
    radioModel: {
      get() {
        return this.isGroup ? this.RadioGroupList.value : this.value
      },
      set (newValue) {
        this.isGroup ? this.RadioGroupList.$emit('input', newValue) : this.$emit('input', newValue)
      }
    }
  },
  mounted () {
    //console.log(this.RadioGroupList)
  }
}
</script>

<style scoped lang='less'>
</style>